<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/media/css/bootstrap.min.css">
    <script src="/media/js/jquery-1.10.1.min.js" type="text/javascript"></script>
    <script src="/media/js/bootstrap.min.js"></script>
<body>
<div class="container select-box-container">
    <div class="toggle-all-container">
        <a href="javascript:;" class="btn btn-md btn-default toggle-all-btn">保存</a>
    </div>
    <div class="fileDiv select-item " id="id-1"></div>
    <div class="fileDiv select-item" id="id-2"></div>
    <div class="fileDiv select-item" id="id-3"></div>
    <div class="fileDiv select-item" id="id-4"></div>
    <div class="fileDiv select-item" id="id-5"></div>
    <div class="fileDiv select-item" id="id-6"></div>
</div>


<script type="text/javascript" src="/echarts/echarts.min.js"></script>
<script type="text/javascript" src="/lib/layer/2.4/layer.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        // 初始化内容
        <#if result?exists>
            <#list result as res>
            var  id = '${res.id}';
            $('#'+id).addClass('selected');
            </#list>
        </#if>
    });
</script>

<style>
    .container {
        padding: 0;
        text-align: center;
    }
    .select-box-container {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .select-box-container .toggle-all-container {
        margin-bottom: 0px;
    }
    .select-item {
        display: inline-block;
        width: 30%;
        height: 200px;
        text-align: center;
        line-height: 100px;
        font-size: 12px;
        border: 1px solid #ccc;
        margin:1%
        cursor: pointer;
    }
    .select-item.selected,
    .select-item.temp-selected {
        background-color: #ddd;
    }
</style>

<script>
    var initSelectBox = function(selector, selectCallback) {
        $(selector).on('click', '.select-item', function() {
            if ($(this).hasClass('selected')) {
                $(this).removeClass('selected');
            } else {
                $(this).addClass('selected');
            }
        })
    };
    initSelectBox('.container');
</script>
<script type="text/javascript">
    $('.btn').click(function(){
        var ids = new Array();
        $(".container").find(".fileDiv").each(function(){
            if($(this).hasClass('selected')){
                ids.push($(this).attr('id'));
            }
        });
        $.ajax({
            url : '/localUserInfo-chart-flag',
            async :false,
            data : {"ids":ids.join('&')},
            type : 'post',
            beforeSend: function(){
                layer.msg("保存中")
            },
            success :function(data){
                if(data=="success"){
                    layer.msg("保存成功");
                }else if(data=='noInfo'){
                    var index = layer.open({
                        type: 2,
                        title: "由于未设置个人信息，请先设置个人信息",
                        content: '/localUserInfo-list',
                        shadeClose: true,
                        shade: false,
                        maxmin: true, //开启最大化最小化按钮
                        area: ['893px', '600px'],
                    });
                    // layer.full(index);
                }else{
                    layer.msg("保存错误")
                }
            }
        })
    })
</script>

<!-- 数据表格 id-1 -->
<script type="text/javascript">
    var dom = document.getElementById("id-1");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;

    option = {
        title: {
            text: '应用研发二室工作量统计',
            subtext: '统计数据',
            left: 'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            bottom: 10,
            left: 'center',
            data: ['研究一组', '研究二组','研究三组']
        },
        series : [
            {
                type: 'pie',
                radius : '65%',
                center: ['50%', '50%'],
                selectedMode: 'single',
                data:[
                    {
                        value:1548,
                        name: '研究一组',
                        label: {
                            normal: {
                                formatter: [
                                    '{title|{b}}{abg|}',
                                    ' {data8011|8011}{activeOperation|运维}{develop|功能开发}',
                                    '{hr|}',
                                    '  {val8011|100}{value|202}{rate|55.3%}',
                                    '  {val8011|100}{value|142}{rate|38.9%}',
                                    '  {val8011|100}{value|21}{rate|5.8%}'
                                ].join('\n'),
                                backgroundColor: '#eee',
                                borderColor: '#777',
                                borderWidth: 1,
                                borderRadius: 4,
                                rich: {
                                    title: {
                                        color: '#eee',
                                        align: 'center'
                                    },
                                    abg: {
                                        backgroundColor: '#333',
                                        width: '100%',
                                        align: 'right',
                                        height: 25,
                                        borderRadius: [4, 4, 0, 0]
                                    },
                                    val8011: {
                                        width: 20,
                                        padding: [0, 0, 0, 0],
                                        align: 'left'
                                    },
                                    data8011: {
                                        color: '#333',
                                        height: 24,
                                        align: 'left'
                                    },
                                    hr: {
                                        borderColor: '#777',
                                        width: '100%',
                                        borderWidth: 0.5,
                                        height: 0
                                    },
                                    value: {
                                        width: 20,
                                        padding: [0, 20, 0, 30],
                                        align: 'left'
                                    },
                                    activeOperation: {
                                        color: '#333',
                                        width: 20,
                                        padding: [0, 20, 0, 30],
                                        align: 'center'
                                    },
                                    rate: {
                                        width: 40,
                                        align: 'right',
                                        padding: [0, 10, 0, 0]
                                    },
                                    develop: {
                                        color: '#333',
                                        width: 40,
                                        align: 'center',
                                        padding: [0, 10, 0, 0]
                                    }
                                }
                            }
                        }
                    },
                    {value:535, name: '研究二组'},
                    {value:510, name: '研究三组'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
<!-- 数据表格 id-2-->
<script type="text/javascript">
    var dom2 = document.getElementById("id-2");
    var myChart2 = echarts.init(dom2);
    var app = {};
    option = null;
    var posList = [
        'left', 'right', 'top', 'bottom',
        'inside',
        'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
        'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
    ];
    app.configParameters = {
        rotate: {
            min: -90,
            max: 90
        },
        align: {
            options: {
                left: 'left',
                center: 'center',
                right: 'right'
            }
        },
        verticalAlign: {
            options: {
                top: 'top',
                middle: 'middle',
                bottom: 'bottom'
            }
        },
        position: {
            options: echarts.util.reduce(posList, function (map, pos) {
                map[pos] = pos;
                return map;
            }, {})
        },
        distance: {
            min: 0,
            max: 100
        }
    };

    app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
            var labelOption = {
                normal: {
                    rotate: app.config.rotate,
                    align: app.config.align,
                    verticalAlign: app.config.verticalAlign,
                    position: app.config.position,
                    distance: app.config.distance
                }
            };
            myChart2.setOption({
                series: [{
                    label: labelOption
                }, {
                    label: labelOption
                }, {
                    label: labelOption
                }, {
                    label: labelOption
                }]
            });
        }
    };


    var labelOption = {
        normal: {
            show: true,
            position: app.config.position,
            distance: app.config.distance,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            rotate: app.config.rotate,
            formatter: '',
            fontSize: 16,
            rich: {
                name: {
                    textBorderColor: '#fff'
                }
            }
        }
    };
    option = {
        color: ['#003366', '#006699', '#4cabce', '#e5323e'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['8011运维', '功能开发', '日常点检', '其他工作']
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                axisTick: {show: false},
                data: ['研究一组', '研究二组', '研究三组']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '8011运维',
                type: 'bar',
                barGap: 0,
                label: labelOption,
                data: [320, 332, 301]
            },
            {
                name: '功能开发',
                type: 'bar',
                label: labelOption,
                data: [220, 182, 191]
            },
            {
                name: '日常点检',
                type: 'bar',
                label: labelOption,
                data: [150, 232, 201]
            },
            {
                name: '其他工作',
                type: 'bar',
                label: labelOption,
                data: [98, 77, 101]
            }
        ]
    };;
    if (option && typeof option === "object") {
        myChart2.setOption(option, true);
    }

</script>
<!-- 数据表格 id-3-->
<script type="text/javascript">
    var dom3 = document.getElementById("id-3");
    var myChart3 = echarts.init(dom3);
    var app = {};
    option = null;
    option = {
        legend: {},
        tooltip: {},
        dataset: {
            source: [
                ['product', '2018年8月', '2018年9月'],
                ['坤帝科计划系统', 43.3, 85.8],
                ['宝信MES系统', 83.1, 73.4],
                ['计量系统', 86.4, 65.2]
            ]
        },
        xAxis: {type: 'category'},
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
            {type: 'bar'},
            {type: 'bar'}
        ]
    };
    ;
    if (option && typeof option === "object") {
        myChart3.setOption(option, true);
    }
</script>
<!-- 数据表格 id-4-->
<script type="text/javascript">
    var dom4 = document.getElementById("id-4");
    var myChart4 = echarts.init(dom4);
    var app = {};
    option = null;
    option = {
        legend: {},
        tooltip: {},
        dataset: {
            source: [
                ['product', '共享日志数量', ],
                ['研发一组', 43],
                ['研发二组', 53],
                ['研发三组', 44]
            ]
        },
        xAxis: {type: 'category'},
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
            {type: 'bar'}
        ]
    };
    ;
    if (option && typeof option === "object") {
        myChart4.setOption(option, true);
    }
</script>

</body>
</html>
